<template>
    <div class="ReordsdPage">
        <PageHeader :lang="lang"></PageHeader>
        <!--资产总览-->
        <div class="pageBody" id="pageBody">
          <!-- 左侧部分 -->
            <pageLeftMenu ref="getUnReadNotInfo"></pageLeftMenu>
       <!-- 右侧部分 -->
            <div class="pageMain">
                <div class="mainHead">
                    <h3 class="mainTitle">{{lang['financial records']}}</h3>
                </div>
                <div class="Financial_filter">
                  <div class="AddedSelect">
                    <select @change="selectCurrency" class="teaxt" v-model="selectedCurrencyId">
                      <option value="">{{lang['whole']}}</option>
                      <option v-for="item in currencyList" :value="item.ID" :key="item.ID">{{item.Code}}</option>
                    </select>
                  </div>
                  <a class="test" :class="{testa: testa === 6}" @click="selectRecordType(6)">{{lang['recharge']}}</a>
                  <a class="test" :class="{testa: testa === 7}" @click="selectRecordType(7)">{{lang['withdraw deposit']}}</a>
                  <a class="test" :class="{testa: testa === 5}" @click="selectRecordType(5)">{{lang['System Gift']}}</a>
                  <div class="date">
                    <el-date-picker v-model="selectedStartDate" type="date" :placeholders="lang['please select start date']"> </el-date-picker>
                    -
                    <el-date-picker v-model="selectedEndDate" type="date" :placeholders="lang['please select end date']"> </el-date-picker>
                  </div>
                  <button type="button" class="filterBth" @click="selectStartAndEndDate()"><img src="../../assets/images/page/asset_09.png">
                  {{lang['dressing screening']}}</button>
                </div>
               <div class="filter_List">
                   <ul>
                      <li>{{lang['time']}}</li>
                      <li style="width:8%">{{lang['currency surname']}} </li>
                      <li style="width:11%; margin-left:10px;">{{lang['type']}}</li>
                      <li style="width:17%">{{lang['quantity']}}</li>
                      <li style="width:10%; margin-right:2%;">{{lang['status']}}</li>
                      <li style="width:10%; margin-right:2%;">{{lang['poundage']}}</li>
                      <li style="width:15%; float: right;">{{lang['operate']}}</li>
                   </ul>
                  <div v-show="recordListlength"  style="display:none; position:absolute; width:100%; margin-top:15%; text-align:center; color:#bbb">
                    <img src="../../assets/images/noNews.png" alt=""><p>{{lang['norecord']}}</p>
                  </div>
                   <ul class="title" v-for="(item, index) in recordList" :key="item.ID">
                      <li>{{item.ApplyDate}}</li>
                      <li style="width:8%">{{item.AssetsCode}}</li>
                      <li style="width:11%; margin-left:10px;">
                        <font v-if="item.AssetsRecordType === 1" v-text="lang['Charging money']"></font>
                        <font v-if="item.AssetsRecordType === 2" v-text="lang['recharge']"></font>
                        <font v-if="item.AssetsRecordType === 3" v-text="lang['carry currency']"></font>
                        <font v-if="item.AssetsRecordType === 4" v-text="lang['withdraw deposit']"></font>
                        <font v-if="item.AssetsRecordType === 5" v-text="lang['System Gift']"></font>
                        <font v-if="item.AssetsRecordType === 6" v-text="ling['recharge']"></font>
                        <font v-if="item.AssetsRecordType === 7" v-text="lang['roll out']"></font>
                      </li>
                      <li style="width:17%">{{item.AssetsQuantity}}</li>
                      <li style="width:10%; margin-right:2%;">
                        <font v-if="item.AssetsStatus === 1" v-text="lang['apply for']"></font>
                        <font v-if="item.AssetsStatus === 2" v-text="lang['pending']"></font>
                        <font v-if="item.AssetsStatus === 3" v-text="lang['in hand']"></font>
                        <font v-if="item.AssetsStatus === 4" v-text="lang['failure deal with']"></font>
                        <font v-if="item.AssetsStatus === 5" v-text="lang['failed approve']"></font>
                        <font v-if="item.AssetsStatus === 7" v-text="lang['undoed']"></font>
                        <font v-if="item.AssetsStatus === 8" v-text="lang['To be recharged']"></font>
                        <font v-if="item.AssetsStatus === 9" v-text="lang['confirming']"></font>
                        <font v-if="item.AssetsStatus === 10" v-text="lang['has arrived']"></font>
                        <font v-if="item.AssetsStatus === 11" v-text="lang['exported']"></font>
                        <font v-if="item.AssetsStatus === 12" v-text="lang['off the stocks']"></font>
                      </li>
                      <li style="width:10%; margin-right:2%;">{{item.Fee}}</li>
                      <li style="width:15%; float: right;">
                        <a v-if="item.AssetsRecordType !== 2" class="btnDetails" @click="openDateil(index, item, type = 1)" href="javascript:;">{{lang['detailed information']}}</a>
                        <a v-if="item.AssetsStatus === 2 && item.AssetsRecordType === 3" :title="lang['undo']" class="btnDetails" @click="openDateil(index, item, type = 3)" href="javascript:;">{{lang['undo']}}</a>
                        <a v-if="item.AssetsStatus === 2 && item.AssetsType === 1" :title="lang['undo']" class="btnDetails" @click="openDateil(index, item, type = 4)" href="javascript:;">{{lang['undo']}}</a>
                      </li>
                      <div class="detailList clearfix" v-if="item.detail" v-show="item.detail && item.isShowDetail">
                        <div class="clearfix thead">
                          <div class="th 1" v-show="item.detail.CoinHandleTime !== null" style="width: 24%;">{{lang['wallet Processing Time']}}</div>
                          <div class="th 2" v-show="item.detail.BankName !== null" style="width: 20%;">{{lang['bank name']}}</div>
                          <div class="th 1" v-show="item.detail.BankCardUserName !== null" style="width: 16%;">{{lang['name of account holder']}}</div>
                          <div class="th 1" v-show="item.detail.BankCard !== null" style="width: 20%; padding-right: 3%;">{{lang['bank account']}}</div>
                          <div class="th 1" v-show="item.detail.Branch !== null" style="width: 20%; padding-right: 2%;">{{lang['bank Address']}}</div>
                          <div class="th 1" v-show="item.detail.SWIFTCode !== null" style="width: 18%;">SWIFT CODE</div>
                          <div class="th 2" v-if="item.AssetsRecordType === 3" v-show="item.detail.CoinAddress !== null" style="padding-right: 2%;width: 24%;">{{lang['currency address']}}</div>
                          <div class="th 3" v-show="item.detail.CoinHandleTime !== null" style="padding-right: 5%; width: 30%;">{{lang['Block chain transaction']}}</div>
                          <div class="th 3" v-show="item.detail.RequiredConfirms !== 0" style="width: 16%;">{{lang['Confirmation']}}</div>
                        </div>
                        <div class="clearfix tr" :class="item.detail.CoinAddress?'tr2':'tr1'">
                          <div class="td" style="width: 24%;" v-text="item.detail.CoinHandleTime"></div>
                          <div class="td" style="width: 20%;" v-text="item.detail.BankName"></div>
                          <div class="td" style="width: 16%;" v-text="item.detail.BankCardUserName"></div>
                          <div class="td" style="width: 20%; padding-right: 3%;" v-text="item.detail.BankCard"></div>
                          <div class="td" style="width: 20%; padding-right: 2%;" v-text="item.detail.Branch"></div>
                          <div class="td" style="width: 18%;" v-text="item.detail.SWIFTCode"></div>
                          <div class="td" v-show="item.AssetsRecordType === 3" style="padding-right: 2%;width: 24%;" v-text="item.detail.CoinAddress"></div>
                          <div class="td" style="padding-right: 5%; width:30%" v-text="item.detail.CoinBlockTX" :data-conf="item.detail.Confirms + '/' + item.detail.RequiredConfirms"></div>
                          <div class="td" v-show="item.AssetsRecordType === 1" v-if="!item.detail.Confirms" style="width:10%">
                            0
                          </div>
                          <div class="td" v-show="item.AssetsRecordType === 1" v-else-if="item.detail.Confirms >= item.detail.RequiredConfirms" style="width:10%">
                            {{item.detail.RequiredConfirms}}
                          </div>
                          <div class="td" v-show="item.AssetsRecordType === 1" v-else style="width:10%">
                            {{item.detail.Confirms + '/' + item.detail.RequiredConfirms}}
                          </div>
                        </div>
                      </div>
                   </ul>
                   <SwPaging :total="total" :pageSize="pageSize" :pageRange="pageRange" :lang="lang" @jumpPage="jumpPage"></SwPaging>
              </div>
            </div>
        </div>
  <!-- 撤销提示框 -->
      <div class="Revoked"  style="display:none">
         <img src="../../assets/images/page/funds_Undo.png"> {{lang['withdrawn']}}
      </div>
  <!-- 撤销提示框 -->
        <!--资产总览-->
        <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
    </div>
</template>
<script>
import commonMixins from '@/mixins/common.js'
import commonFilter from '@/filters/common.js'
import Utils from '@/utils/Utils.js'
import SwPaging from '@/components/SwPaging/index.vue'
import ModalApi from '@/components/SwModal/api.js'
import pageLeftMenu from './components/pageLeftMenu.vue'

export default {
  mixins: [commonMixins],
  data () {
    return {
      itemCode: '',
      pageIndex: 1, // 当前页
      pageSize: 10, // 每页多少条
      pageRange: 7, // 页码条范围，例如8就是显示1-7的页码条
      total: 0,
      startDate: '',
      endDate: '',
      selectedStartDate: '',
      selectedEndDate: '',
      recordList: [],
      show: true,
      AssetsRecordType: '',
      currencyList: '',
      selectedCurrencyId: '',
      diybu: false,
      currentRecordType: '', // 6充值 7提现 5赠送
      currentRecordDateType: '', // 0是30天内 1是30天前
      testa: -1,
      assets: [],
      recordListlength: false,
      setReadList: {}
    }
  },
  watch: {
    selectedStartDate () {
      this.selectedStartDate && this.selectedEndDate && this.selectedStartDate >= this.selectedEndDate && (this.selectedStartDate = '')
    },
    selectedEndDate () {
      this.selectedStartDate && this.selectedEndDate && this.selectedStartDate >= this.selectedEndDate && (this.selectedEndDate = '')
    },
    recordList () {
      this.fillDecimal()
    },
    assets () {
      this.fillDecimal()
    }
  },
  components: {
    SwPaging,
    pageLeftMenu
  },
  methods: {
    formatNum (val, item) {
      let prec = item.Precision
      return commonFilter.fillDecimal(commonFilter.currency(val, 'USD', '', prec), prec)
    },
    fillDecimal () {
      // recordList assets 只有两者有值才能执行
      this.recordList.length && this.assets.length &&
      this.recordList.forEach((item) => {
        item.AssetsQuantity = this.formatNum(item.AssetsQuantity, item)
        item.Fee = this.formatNum(item.Fee, item)
      })
    },
    getAssets () {
      this.$http.post('CustomerAssets/GetAssets', {}, {
        modalOptions: {
          modalClass: 'userModal'
        }
      }).then((res) => {
        if (res.isOk) {
          this.assets = res.Data.Assets || []
          Utils.definePropertyForArray(this.assets, 'AssetsCode')
        }
      })
    },
    itemCodes (item) {
      this.itemCode = item.Code
    },
    openDateil (index, item, type) {
      // 提币撤消
      let AssetsRecordID = item.AssetsRecordID
      if (type === 3) {
        this.CancelTheorder(AssetsRecordID)
      } else if (type === 4) {
        this.CancelApplyOutGold(AssetsRecordID)
      } else if (type === 1) {
        item.isShowDetail = !item.isShowDetail
      }

      if (item.isShowDetail) {
        // 打开一个，关闭其它
        this.recordList.filter((v) => v.AssetsRecordID !== item.AssetsRecordID).forEach((v) => {
          if (v.isShowDetail) v.isShowDetail = false
        })
        this.$http.post('AssetsRecord/GetAssetsRecordDetail', {
          recordId: item.AssetsRecordID,
          assetsRecordType: item.AssetsRecordType
        }, {
          // mock: 'GetAssetsRecordDetail'
          modalOptions: {
            modalClass: 'userModal'
          }
        }).then((res) => {
          item.detail = res.Data || []
          this.$set(this.recordList, index, item)
        })
      // 关闭
      } else {
        this.$set(this.recordList, index, item)
      }
    },
    CancelApplyOutGold (AssetsRecordID) {
      let confirm = ModalApi.confirm({
        isShowCloseBtn: true,
        isCloseOnClickBg: true,
        modalClass: 'userModal',
        title: 'point out',
        content: 'Whether to withdraw the currency',
        okText: 'determineBth',
        noText: '',
        isShowBg: true,
        ok: () => {
          confirm.close()
          this.$http.post('CustomerAssets/CancelApplyOutGold', {
            id: AssetsRecordID
          }).then((res) => {
            if (res.StatusCode === '200') {
              setTimeout(() => {
                this.getRecords()
              }, 1000)
              ModalApi.message(this.lang['Your withdrawal request has been revoked'], null, null, 'userModal')
            }
          })
        }
      })
    },
    CancelTheorder (AssetsRecordID) {
      let confirm = ModalApi.confirm({
        isShowCloseBtn: true,
        isCloseOnClickBg: true,
        modalClass: 'userModal',
        title: 'point out',
        content: 'Whether to withdraw the currency',
        okText: 'determineBth',
        noText: '',
        isShowBg: true,
        ok: () => {
          confirm.close()
          this.$http.post('CustomerAssets/CancelApplyTransactionOut', {
            id: AssetsRecordID
          }, {
            modalOptions: {
              modalClass: 'userModal'
            }
          }).then((res) => {
            if (res.StatusCode === '200') {
              setTimeout(() => {
                this.getRecords()
              }, 1000)
              ModalApi.message(this.lang['Your withdrawal request has been revoked'], null, null, 'userModal')
            }
          })
        }
      })
    },
    getRecords (no) {
      this.$http.post('AssetsRecord/GetAssetsRecordPageList', {
        AssetsID: this.selectedCurrencyId,
        StartDate: this.startDate,
        EndDate: this.endDate,
        BillNO: '',
        AssetsRecordType: this.currentRecordType,
        PageSize: this.pageSize,
        PageIndex: no || this.pageIndex,
        ClientType: this.ClientType
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        this.recordList = res.Data || []
        this.total = res.TotalItem
        if (this.recordList.length < 0) this.recordListlength = true
      })
    },
    jumpPage (no) {
      this.getRecords(no)
    },
    tradeVariety () {
      this.$http.get('TradeVariety/GetAllTradeVarietyList', {
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        this.currencyList = res.Data || []
      })
    },
    // 选择货币
    selectCurrency () {
      this.getRecords()
    },
    // 选择充值、提现、系统赠送
    selectRecordType (type) {
      this.testa = type
      if (this.currentRecordType === type) {
        this.currentRecordType = ''
        this.testa = -1
      } else {
        this.currentRecordType = type
      }
      this.getRecords()
    },
    // 选择30天内、30天前
    selectRecordDateType (type) {
      this.selectedStartDate = ''
      this.selectedEndDate = ''
      if (this.currentRecordDateType === type) {
        this.currentRecordDateType = -1
        this.startDate = ''
        this.endDate = ''
      } else if (type === 0) { // 30天内
        this.currentRecordDateType = type
        let dateObj = this.getStartAndEndDateByFrontDays(30)
        this.startDate = dateObj.startDate
        this.endDate = dateObj.endDate
      } else if (type === 1) { // 30天前，即用户注册日期到30天前的记录
        this.currentRecordDateType = type
        let dateObj = this.getStartAndEndDateByFrontDays(30)
        this.startDate = ''
        this.endDate = dateObj.startDate
      }
      this.getRecords()
    },
    // 指定日期范围
    selectStartAndEndDate () {
      this.currentRecordDateType = -1
      this.startDate = this.selectedStartDate ? Utils.formatDate(this.selectedStartDate, 'yyyy-MM-dd') + ' 00:00:00' : ''
      this.endDate = this.selectedEndDate ? Utils.formatDate(this.selectedEndDate, 'yyyy-MM-dd') + ' 23:59:59' : ''
      this.getRecords()
    },
    // 根据传入前几天来获取开始日期和结束日期
    getStartAndEndDateByFrontDays (frontDays = 0) {
      var date = new Date()
      date.setDate(date.getDate() - frontDays)
      date.setHours(0, 0, 0)
      let startDate = Utils.formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      let endDate = Utils.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      return {
        startDate,
        endDate
      }
    },
    setRead () {
      this.$http.post('CustomerNotification/SetRead', {
        notificationTypes: '1, 2'
      }, {
        isDisposeCode: false
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.setReadList = res.Data
          this.$refs.getUnReadNotInfo.$emit('getUnReadNotInfo') 
        }
      })
    },
    init () {
      this.tradeVariety()
      this.getRecords()
      this.getAssets()
      this.setRead()
    }
  },
  mounted () {
      this.init()
  }
}
</script>

<style lang="less">
.userModal{
  .head{
    text-align: center;
  }
  .sw-confirm{
    text-align: center;
  }
}
.ReordsdPage {
    /*// 总资产折合*/
  .mainHead{
    height: 49px;
    line-height: 49px;
    color: #a4a9ac;
    h3{
    font-weight: 100;
    }
    span{
    letter-spacing:1.5px;
    font-weight: 100;
    }
  }

  .SwPaging{
    padding:5px 0;
    margin:0 auto;
    left:170px;
    margin-top: 25px;
  }
  .Financial_filter {
    background-color: #2A3440;
    height: 48px;
    line-height: 48px;
    overflow: visible;
    position: relative;
    display: flex;

    .test{
      float: left;
      color: #a4a9ac;
      padding:0 3px;
      margin:0 8px;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .test:hover{
      color: #3782FF;
    }
    .testa{
      color: #3782FF;
    }
    .btnActive {
      margin-top: 8px;
      height: 24px;
      line-height: 24px;
      color: #a4a9ac;
      background-color: #213763;
      border-radius: 5px;
      &:hover {
        color: #fff;
      }
    }
    p{
      float: left;
      color: #8a8e9b;
      input{
        height:24px;
        line-height: 24px;
        letter-spacing: .5px;
        border:solid 1px #7f8492;
        padding: 0 10px;
        font-size:12px;
        border-radius: 3px;
        margin:0 5px;
      }
      input::-webkit-inner-spin-button { visibility: hidden;}
      input::-webkit-calendar-picker-indicator{border-radius: 2px; background: #dfdfdf;}
    }
    .filterBth{
      float: left;
      margin-top: 13px;
      margin-left: 10px;
      height: 24px;
      color: #fff;
      line-height: 24px;
      width: auto;
      padding:0 5px;
      font-size: 12px;
      top:48px;
      background: #485E7A;
      font-weight: lighter;
      border-radius: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      img {
        display: inline-block;
        position: relative;
        top: 2px;
      }
    }
    .el-input {width: 130px;font-size: 12px;}
    .el-input__inner {
      height: 24px;
      line-height: 24px;
      background:#2A3440;
      border: 1px solid #bbb;
      border-radius: 2px;
    }
    .date {
      float: left;
      color: #fff;
      white-space: nowrap;
    }
  }

  // .filter_List {display: none;}
  .filter_List {
    position: relative;
    ul {
      background: none;
      border-top:1px solid  #23252F;
      padding: 0 10px;
      display: flex;
      flex-wrap: wrap;
      
      li {
        float: left;
        width: 12%;
        line-height: 45px;
        color: #a4a9ac;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      li:first-child {
        width: 20%;
      }
      li.cologreen {
        color: #64af5f;
      }
      li.colored {
        color: #fb6968;
      }
    }

    .btnDetails{
      color: #3782FF;
    }
    .btnDetails+.btnDetails {
      margin: 0 20px;
    }
    .btnDetails.active {
      transform: rotate(180deg);
    }
    .btnUndo {
      color: #fff;
      background-color: #fb5a58;
      padding: 2px 8px;
      border-radius: 3px;
    }
  }
/* 财务记录 详情样式 2018-7-3 by fanyarong */
 .detailList {
    clear: left;
    padding:0 1%;/*6 0 */
    margin-left:-1%;
    width: 102%;
    border: solid 1px #1a2b3d;
    background-color:#1a1f2b;
    .thead {
      font-family: PingFang-SC-Regular;
      font-size:0.725rem;
      line-height:2.225rem;
      color:rgba(255,255,255,.7)
    }
    .th {
      float: left;
    }
    .tr {
      border-top:1px solid #23252f;
    }
    .tr1{
      padding-top:0.75rem;
      height:1.8rem;
    }
    .tr2{
      padding-top:0.25rem;
      height:2.3rem;
    }
    .td {
      float:left;
      font-size:0.625rem;
      line-height:1rem;
      color: #999;
      word-wrap:break-word;
    }
  }

  .Revoked {
    width: 200px;
    height: 50px;
    line-height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .4);
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -115px 0 0 -100px;
    color: #888;
    border-radius: 4px;
    img {
      vertical-align: middle;
    }
  }

  /*下拉样式*/
  .AddedSelect{
    display: inline-block;
    float: left;
    padding:0 10px;
    position: relative;
    top: 2px;
    height: auto;
    .teaxt{
      border: none;
      padding:10px 0;
    }

    .teaxt {
      display: inline-block;
      overflow:hidden;
      width: 65px;
      height: 40px;
      text-align: left ;
      option{
        padding:10px 0;
        background: #2A3440;
        border-top: 1px solid #23252F;
      }
      color: #fff;
    }
    .inner-container::-webkit-scrollbar {
      display: none;
    }
    ul li{
      cursor: pointer;
      color: #fff;
      font-size: 12px;
      line-height: 30px;
      height: 30px;
      border-top: 1px solid #23252F;
    }
    ul li:hover{
      background: #3782FF;
    }
  }
}

@media screen and (max-width: 1100px){
  .ReordsdPage {

    .Financial_filter .el-input {
      width: 100px;
    }

    .filter_List {
      
      ul {
        display: flex;
        font-size: 12px;

        li:first-child {
          max-width: 120px;
        }
        
        li:nth-child(4) {
          text-align: center;
        }

        li:last-child {
          width: 10% !important;
          white-space: nowrap;
          overflow: inherit;
          text-overflow: inherit;
        }
      }
      ul:first-child {
        font-size: 14px;
      }
      .title li:first-child {
        width: 20%;
        line-height: 15px;
        white-space: normal;
        max-width: 120px;
        clear: right;
        display: flex;
        align-items: center;
      }
    }
  } 
}

</style>
